<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram: Spring-Mass System</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
<canvas id="physicsCanvas" width="400" height="500"></canvas>

<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Define main drawing parameters
    const centerX = canvas.width / 2;
    const lineStyle = {
        color: 'black',
        lineWidth: 1.5
    };
    const textStyle = {
        font: 'italic 22px "Times New Roman"',
        align: 'center',
        baseline: 'middle',
        color: 'black'
    };
    const captionStyle = {
        font: '24px "KaiTi", "SimSun"', // Use common Chinese fonts
        align: 'center',
        baseline: 'middle',
        color: 'black'
    };

    // Function to draw the spring
    function drawSpring(x, y_start, length, coils, amplitude) {
        ctx.beginPath();
        ctx.moveTo(x, y_start);
        const steps = 100;
        for (let i = 0; i <= steps; i++) {
            const y = y_start + (i / steps) * length;
            const angle = (i / steps) * coils * 2 * Math.PI;
            const x_offset = amplitude * Math.cos(angle);
            ctx.lineTo(x + x_offset, y);
        }
        ctx.stroke();
    }

    // --- Start Drawing ---

    // Clear canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // Set common styles
    ctx.strokeStyle = lineStyle.color;
    ctx.lineWidth = lineStyle.lineWidth;

    // 1. Draw the fixed support (ceiling)
    const ceilingY = 60;
    const ceilingWidth = 160;
    ctx.beginPath();
    ctx.moveTo(centerX - ceilingWidth / 2, ceilingY);
    ctx.lineTo(centerX + ceilingWidth / 2, ceilingY);
    ctx.stroke();
    // Draw hatching
    for (let i = 0; i <= ceilingWidth; i += 15) {
        ctx.beginPath();
        ctx.moveTo(centerX - ceilingWidth / 2 + i, ceilingY);
        ctx.lineTo(centerX - ceilingWidth / 2 + i - 10, ceilingY - 10);
        ctx.stroke();
    }

    // 2. Draw the spring and its connections
    const springStartY = 80;
    const springLength = 120;
    const springEndY = springStartY + springLength;
    // Top connector line
    ctx.beginPath();
    ctx.moveTo(centerX, ceilingY);
    ctx.lineTo(centerX, springStartY);
    ctx.stroke();
    // Draw the spring
    drawSpring(centerX, springStartY, springLength, 4.5, 15);
    // Draw spring constant label 'k'
    ctx.font = textStyle.font;
    ctx.fillStyle = textStyle.color;
    ctx.textAlign = 'left';
    ctx.textBaseline = textStyle.baseline;
    ctx.fillText('k', centerX + 25, springStartY + springLength / 2);


    // 3. Draw the first mass (m1)
    const massSize = 50;
    const m1_connector_length = 20;
    const m1_topY = springEndY + m1_connector_length;
    const m1_centerY = m1_topY + massSize / 2;
    // Connector from spring to m1
    ctx.beginPath();
    ctx.moveTo(centerX, springEndY);
    ctx.lineTo(centerX, m1_topY);
    ctx.stroke();
    // Mass m1 box
    ctx.strokeRect(centerX - massSize / 2, m1_topY, massSize, massSize);
    // Label for m1
    ctx.textAlign = textStyle.align;
    ctx.fillText('m', centerX - 4, m1_centerY);
    ctx.save();
    ctx.font = 'italic 16px "Times New Roman"';
    ctx.fillText('1', centerX + 10, m1_centerY + 6);
    ctx.restore();

    // 4. Draw the second mass (m2)
    const m1_bottomY = m1_topY + massSize;
    const m1_m2_connector_length = 20;
    const m2_topY = m1_bottomY + m1_m2_connector_length;
    const m2_centerY = m2_topY + massSize / 2;
    // Connector from m1 to m2
    ctx.beginPath();
    ctx.moveTo(centerX, m1_bottomY);
    ctx.lineTo(centerX, m2_topY);
    ctx.stroke();
    // Mass m2 box
    ctx.strokeRect(centerX - massSize / 2, m2_topY, massSize, massSize);
    // Label for m2
    ctx.font = textStyle.font;
    ctx.textAlign = textStyle.align;
    ctx.fillText('m', centerX - 4, m2_centerY);
    ctx.save();
    ctx.font = 'italic 16px "Times New Roman"';
    ctx.fillText('2', centerX + 10, m2_centerY + 6);
    ctx.restore();

    // 5. Draw the caption
    const captionY = m2_topY + massSize + 60;
    ctx.font = captionStyle.font;
    ctx.fillStyle = captionStyle.color;
    ctx.textAlign = captionStyle.align;
    ctx.textBaseline = captionStyle.baseline;
    ctx.fillText('力图 3.1.1', centerX, captionY);

</script>
</body>
</html>